<template>
  <BaseDialog />
  <NotificationRoot />

  <div>
    <!-- 菜单 -->
    <Sidebar 
      :sidebarOpenInit="sidebarOpen"
      @sidebarOpenChange="(ret) => sidebarOpen = ret"
    />

    <div class="md:pl-64 flex flex-col flex-1">
      <div class="sticky top-0 z-10 flex-shrink-0 flex h-16 bg-white shadow">
        <button type="button" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden" @click="sidebarOpen = true">
          <span class="sr-only">Open sidebar</span>
          <BaseIcon name="Bars3BottomLeftIcon" class="h-6 w-6" aria-hidden="true" />
        </button>
        <Header />
      </div>

      <main class="h-screen overflow-y-auto min-h-0">
        <div class="pb-16">
          <router-view />
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Header from './Header.vue'
import Sidebar from './Sidebar.vue'
import NotificationRoot from '@/components/notifications/NotificationRoot.vue'

const sidebarOpen = ref(false)

</script>